<!-- 步骤条 -->
<template>
	<view class="steps">
		<template v-for="(item,index) in list" :key="index">
			<view :class="['item',{'item-active':index<=active}]" :style="{'width':`${(100/list.length)}%`}">
				<view class="icon" :style="{width:size+'rpx',height:size+'rpx',color:index<=active?'#fff':borderColor,'border-color':index<=active?activePointColor:borderColor,'background-color':index<=active?activePointColor:pointColor}">
					<text class="small-point" v-if="smallPoint" :style="{background:borderColor}"></text>
					<text v-else>{{item.value}}</text>
				</view>
				<view class="name" :style="{'color':index<=active?activeTextColor:textColor}"><text>{{item.name}}</text></view>
				<view class="desc" :style="{'color':index<=active?activeDescColor:descColor}"><text>{{item.desc}}</text></view>
				<view class="line" :style="{'background':index<=active?activeLineColor:lineColor}"></view>
			</view>
		</template>
	</view>
</template>
<script setup>
	import { ref } from 'vue';
	const data_props = defineProps({
		list: Array,
		active: {
			type: [Number, String],
			default: 0
		},
		size: {
			type: [Number, String],
			default: 26
		},
		borderColor: {
			type: String,
			default: '#aaa'
		},
		smallPoint: {
			type: Boolean,
			default: false
		},
		pointColor: {
			type: String,
			default: 'transparent'
		},
		activePointColor: {
			type: String,
			default: '#fff'
		},
		lineColor: {
			type: String,
			default: '#aaa'
		},
		activeLineColor: {
			type: String,
			default: '#E1835B'
		},
		textColor: {
			type: String,
			default: '#aaa'
		},
		activeTextColor: {
			type: String,
			default: '#222'
		},
		descColor: {
			type: String,
			default: '#aaa'
		},
		activeDescColor: {
			type: String,
			default: '#222'
		},
		lineScale: {
			type: [Number, String],
			default: 46
		}
	})
	const lineTop = ref(`${data_props.size/2}rpx`);
	const lineScale = ref(`${data_props.lineScale}rpx`);
	const lineScale2 = ref(`${data_props.lineScale/2}rpx`);
</script>
<style scoped lang="scss">
	.steps {
		display: flex;
		align-items: center;
		justify-content: space-between;
		.item {
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;
			opacity: 0.8;
			.icon {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 26rpx;
				height: 26rpx;
				border: 2rpx solid #fff;
				border-radius: 50%;
				font-size: 28rpx;
				color: #fff;
				.small-point {
					display: block;
					width: 60%;
					height: 60%;
					border-radius: 50%;
					background-color: #fff;
				}
			}
			.name {
				padding: 10rpx 0;
				font-size: 28rpx;
				color: #fff;
			}
			.desc {
				font-size: 20rpx;
				color: #fff;
			}
			&-active {
				opacity: 1;
				.icon {
					background-color: #fff;
				}
			}
			.line {
				position: absolute;
				top: v-bind(lineTop);
				left: calc(50% + v-bind(lineScale2));
				height: 2rpx;
				width: calc(100% - v-bind(lineScale));
				background: #fff;
			}
			&:last-child .line {
				display: none;
			}
		}
	}
</style>
